<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>注册页面</title>
<link rel="stylesheet" href="css/register/style.css" />
	<link href="css/login/default.css" rel="stylesheet" type="text/css" />
	<!--必要样式-->
	<link href="css/login/demo.css" rel="stylesheet" type="text/css" />
	<!--<link href="css/login/login.css" rel="stylesheet" type="text/css" />-->
<body>

<div class='user-login'>
	<div class="header-login">
		<img src="/img/login/logo-ava1.png" alt="">
		<span></span>
		<p>智慧汽车门店管理系统</p>
	</div>
	<div class="header-content">
		<form id="registerForm">
			<ul>
				<li>
					<p>用户名</p>
					<input type="text" placeholder="请输入6到12位字母，数字，下划线字符" value="" name="username" id="username">
				</li>
				<li class="right">
					<p>密码</p>
					<input type="password" placeholder="请输入6到16位数字和字母组合" value="" name="password" maxlength="16" minlength="6" id="password">
				</li>
				<li>
					<p>联系人</p>
					<input type="text" placeholder="请输入联系人姓名" value="" name="contacts" id="name">
				</li>
				<li class="right">
					<p>联系方式</p>
					<div class="item-call">
						<input type="text" placeholder="请输入手机号码" class="j_getVerifyCode" value="" id="phone" name="phone">
						<span id="j_getVerifyCode" >获取验证码</span>
					</div>

				</li>
				<li>
					<p>门店名称</p>
					<input type="text" placeholder="请输入门店名称" name="merchantName" id="merchantName">
				</li>
				<li class="right">
					<p>验证码</p>
					<input type="text" placeholder="请输入手机验证码" value="" name="verifyCode" id="verifyCode">
				</li>
				<li>
					<p>所属区域</p>
					<select  name="regionId"  oncontextmenu="return false" onpaste="return false" id="regionId">
						<option value="">--请选择区域--</option>
					</select>
				</li>
				<li class="right">
					<p>门店地址</p>
					<input type="text" placeholder="请输入门店地址" value="" name="merchantAddress" id="merchantAddress">
				</li>
			</ul>
		</form>
		<div class="register" id="submit">注册</div>
		<div class="footer">
			<p>已有账号？</p>
			<a href="/login" style="color:#5785db;">去登录>></a>
		</div>
	</div>
</div>



<script src="js/register/jquery.min.js"></script>
<!--<script src="js/register/common.js"></script>-->
<!--背景图片自动更换-->
<!--<script src="js/register/supersized.3.2.7.min.js"></script>-->
<!--<script src="js/register/supersized-init.js"></script>-->
<!--表单验证-->
<script src="js/register/jquery.validate.min.js?var1.14.0"></script>
<script src="js/TimerButton.js"></script>

<script src="layer/layer.js"></script>

<script type="text/javascript">

    $.get("/regions/getAll", function(result){
        var data=result.data;
        var html='';
        for (var i=0; i<data.length; i++)
        {
            html+="<option value='"+data[i].id+"'>"+data[i].regionName+"</option>";
        }

        $("#regionId").append(html);
    });

    $("#submit").click(function () {
        var psd = $("#password").val();
       if($("#username").val() ==""){
       	return layer.msg('用户名不能为空');
	   }else if(psd =="" || psd.length < 6 || psd.length >16 ){
           return layer.msg('请输入正确的密码');
	   }else if($("#name").val() ==""){
           return layer.msg('请输入联系人姓名');
       }else if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test($("#phone").val()))){
           return layer.msg('输入正确的手机号码');
       }else if($("#merchantName").val() ==""){
           return layer.msg('请输入门店名称');
       }else if($("#verifyCode").val() ==""){
           return layer.msg('请输入手机验证码');
       }else if($("#regionId").val() ==""){
           return layer.msg('请选择所属区域');
       }else if($("#merchantAddress").val() ==""){
           return layer.msg('请输入门店地址');
       }
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/registers/register" ,//url
            data: $('#registerForm').serialize(),
            success: function (result) {
                console.log(result);//打印服务端返回的数据(调试用)
                layer.msg(result.msg)
            },
            error : function() {
                alert("异常！");
            }
        });
    })

    var btn = $("#j_getVerifyCode");
    timerButton.verify("#j_getVerifyCode", {
        time: 60,//倒计时时间
        event: "click",//事件触发方式
        //执行条件，可以是function也可以是Boolean值，如果是函数则需返回true才会执行
        condition: function () {
            var switchs=false;
            var phone=$("#phone").val();
            var phoneReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/,
                flag = phoneReg.test(phone);
            if(!flag){
                layer.msg("请输入合法的手机号码");
                switchs=false;
                return switchs;
            }
            $.ajax({
                url: "/registers/sendVerifyCode",
                data: {
                    "phone":phone,
                    "manner":1
                },
                type: "POST",
                async: false,
                success: function (data) {
                    if(data.status==1){
                        layer.msg("验证码发送成功");
                        switchs=true;
                    }else{
                        layer.msg("验证码发送失败");
                        switchs=false;
                    }
                },
                error:function (data){
                    console.log(data);
                }
            });
            return switchs;
        },
        unableClass: "disabled",//按钮不能使用时的class
        runningText: " s后重新获取",//计时正在进行中时按钮显示的文字
        timeUpText: "重新获取",//时间到了时按钮显示的文字
        progress: function (time) {//计时正在进行中时的回调
            btn.attr("disabled",true);
            btn.html(time + " s后重新获取");
            console.log(this);//这里的this指向按钮
            console.log(this.timedown);//这个timedown就是计时器
        },
        timeUp: function (time) {//计时结束时执行的回调
            btn.attr("disabled",false);
            btn.html("重新获取");
            console.log("时间到了！");
            console.log(this);//这里的this指向按钮
        },
        abort: function () {//中断计时
            btn.html("重新获取");
            console.log("我被中断了！");
            console.log(this);//这里的this指向按钮
        },
        eventFn: function () {//事件执行后的回调
            console.log("执行了");
            console.log(this);//这里的this指向按钮
        }
    });
    //中断计时
    $("#abort_btn").on("click", function (){
        document.getElementById("j_getVerifyCode").timedown.abort();
    });
	
</script>
</body>
</html>
